{% extends "base.html" %}

{% block head %}
  <link rel="stylesheet" href="/media/css/track/itinerary.css" type="text/css">
  <script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>
  <script type="text/javascript" src="/media/js/track/itinerary.js"></script>
{% endblock %}

{% block content %}
  <div id="editionInterface">
    <div id="map"></div>
    
    <button id="save" disabled>Save Itinerary</button>
    <button onclick="zoomToItinerary()">Zoom To Itinerary</button>
    <button onclick="clearItinerary()">Clear Itinerary</button>
  </div>

  <table>
    <tr><th>Itinerary</th><th>[<a href="/admin/track/itinerary/add/">Add itinerary</a>]</th><th>Editing</th></tr>
  {% for i in itinerary_list %}
    <tr>
      <td>{{ i }}</td>
      <td><button onclick="editItinerary('{{ i.slug }}')">Edit</button></td>
      <td class="editColumn" id="edit-{{ i.slug }}"></td>
    </tr>
  {% endfor %}
  </table>
{% endblock %}
